<template>
    <div id="app" >
        <el-container style="background: url(http://rww08uahf.hn-bkt.clouddn.com/0dd8ed5b730c4df7babec5898c4b641c.png);">
            <!--抬头开始-->
            <el-header>
                <SpecialTop/>
            </el-header>
            <!--抬头结束-->
            <!--内容开始-->
            <el-main class="center" >

                <div style="margin-bottom: 2px;box-shadow: #2F2F2F">
                    <el-card style="border:4px solid rgba(0,0,0,0.1);background-color: rgba(255,255,255,10%)">
                        <el-input style="width: 100%" clearable="true" v-model="key" placeholder="请输入搜索的关键字" @keyup.enter.native="executeMethod()">
                            <el-button  plain slot="append" icon="el-icon-search" @click=executeMethod()>搜索</el-button>
                        </el-input>
                    </el-card>
                </div>

                <el-card style="width: 96.5%;background-color: rgba(255,255,255,30%)">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" style="width: 100%;background-color: rgba(255,255,255,0%)">
                        <el-menu-item index="1" @click="showorder()"><h1 style="color: gold">博客</h1></el-menu-item>
                        <el-menu-item index="2" @click="selectuser()"><h1 style="color: gold">用户</h1></el-menu-item>
                    </el-menu>


                    <div v-show="showornot">
                        <el-menu :default-active="activeIndex2"  class="el-menu-demo" mode="horizontal"  style="width: 100%;background-color: rgba(255,255,255,0%);border-bottom: solid 0;">
                            <el-menu-item index="4" @click="queryByLike()"><h1 style="color: white">点赞量</h1></el-menu-item>
                            <el-menu-item index="5" @click="queryByVisit()()"><h1 style="color: white">访问量</h1></el-menu-item>
                            <el-menu-item index="6" @click="queryByCollects()"><h1 style="color: white">收藏量</h1></el-menu-item>
                            <el-menu-item index="7" @click="queryByTime"><h1 style="color: white">最新</h1></el-menu-item>
                        </el-menu>
                    </div>


                    <el-col span="24">
                        <el-card class="box-card"  style="height:200px;width: 100%;margin-top: 2%;background-color: rgba(255,255,255,40%)"  v-for="b in blog">
                            <div style="height: 150px;width: 220px;border: 1px solid #CACACA">
                                <img :src=b.blogImg style="width: 220px;height: 150px">
                            </div>
                            <div style="position: relative;left: 250px;bottom: 150px">
                                <span @click="inblog(b.id)" style="cursor: pointer;font-size: 30px"><strong>{{b.blogTitle}}</strong></span>
                            </div>
                            <div>
                       <span style="position: relative;left: 250px;bottom: 130px" @click="inuser(b.userId)">
                                作者:{{b.name}}
                       </span>
                                <span style="position: relative;">

                       </span>
                            </div>

                            <div style="font-size: 13px;position: relative;left: 230px;bottom: 90px;margin-top: 0px">
                     <span style="white-space: nowrap;margin: 5px 20px">
                       <span>
                         <span><img src="../../assets/zan.png" style="width: 16px;height: 16px;">{{ b.likes }}赞</span>
                        <span style="margin-left: 30px;"><i class="el-icon-star-off"></i>{{ b.collects }}收藏</span>
                        <span style="margin-left: 30px;"><i class="el-icon-view"></i>{{ b.visit }}浏览量</span>
                        <span style="margin-left: 30px">#{{ b.typeName }}</span>
                        <span style="margin-left: 30px;"><i class="el-icon-time"></i>{{ b.createTime }}</span>
                       </span>
                         <span style="margin-left: 30px">#{{ b.typeName }}</span>

                       <span style="position: relative;right: 200px">
                         {{b.blogCreateTime}}
                       </span>
                        <div>
                      </div>
                     </span>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col span="24">
                        <el-card class="box-card"  style="height:220px;width: 100%;margin-top: 2%;background-color: rgba(255,255,255,40%)"  v-for="u in user">
                            <div style="float: left">
                                <el-avatar :src="u.avatar" style="width: 170px;height: 170px"></el-avatar>
                            </div>
                            <div style="font-size: 10px;height: 10px;float:left;margin-left: 15px;margin-top: 0px;height: 130px">
                                <img :src="u.headTitle">
                                <p style="margin-top: 0px">
                                    <span style="margin-top: 20px;margin-left: 30px;margin-top: 0px;font-size: 20px;cursor:pointer;" @click="inuser(u.id)"><strong>{{u.nickname}}</strong></span>
                                    <span style="color: red;font-size: 15px;margin-left: 10px"><strong>Lv{{u.level}}</strong></span>
                                </p>
                                <p style="margin-left: 30px;font-size: 20px">
                                    {{u.described}}
                                </p>
                                <div style="margin-left:40px;margin-top: 30px;color: gold;font-size: 20px">关注:{{u.follow}}&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp   粉丝:{{u.fans}}</div>

                            </div>
                        </el-card>
                    </el-col>

                </el-card>

            </el-main>
            <!--内容结束-->
            <!--底部开始-->
            <!--底部结束-->
        </el-container>
    </div>
</template>
<script>
import Top from '@/components/Top.vue'
import Bottom from "@/components/Bottom.vue"
import SpecialTop from "@/components/SpecialTop"
import axios from "axios";
import '@/api/request'
export default {
    components: {
        Top,
        Bottom,
        SpecialTop
    },
    el: '#app',
    data: function () {
        return {
            activeIndex:'1',
            activeIndex2:'4',
            count:10,
            loading: false,
            key:"",
            blog:[],
            content:'',
            showornot:true,
            user:[],
            type: 1,
            id:[]
        }
    },
    computed: {
        noMore () {
            return this.count >= 2000
        },
        disabled () {
            return this.loading || this.noMore
        }
    },

    // watch:{
    //   $route(to,from){
    //     console.log("从哪来:"+from.path);//从哪来
    //     console.log("到哪去"+to.path);//到哪去
    //   }
    // },

    methods: {
        // load () {
        //   this.loading = true
        //   setTimeout(() => {
        //     this.count += 2
        //     this.loading = false
        //   }, 200)
        // },
        executeMethod() {
            switch (this.type){
                case 1:this.showorder();break
                case 2:this.queryByVisit();break;
                case 3:this.queryByCollects();break;
                case 4:this.queryByTime();break;
                case 5:this.selectuser();break;
            }
        },
        showorder(){
            this.showornot=true;
            this.queryByLike()

        },
        open1() {
            const h = this.$createElement;
            this.$notify({
                title: '搜索内容或资源未找到',
                message: h('i', { style: 'color: FFC547'}, '请检查搜索内容重新输入'),
                duration: 2000,
                offset:100
            });
        },
        inblog(id) {
            localStorage.setItem('id', id);
            if(localStorage.getItem('user')===null){
                this.$message.info('请先登录');
                return;
            }
            window.location.href = "detail.html"
        },

        inuser(userId) {
            console.log("传输到方法的userid"+userId)
            if(localStorage.getItem('user')===null){
                this.$message.info('请先登录');
                return;
            }
            if (userId === this.loginUserId) {
                window.location.href = "personalCenter.html";
            }else {
                localStorage.setItem('userId', userId);
                window.location.href = "otherUserCenter.html"
            }
        },



        selectuser(){
            this.type=5;
            this.showornot=false;
            this.blog='';
            this.user="";
            console.log("用户需要搜索的key"+this.key)
            axios("http://localhost:8088/user/queryByKey/"+this.key).then(response=>{
                console.log("查询到的对象"+response.data.data)
                if (response.data.code==1){
                    this.user=response.data.data;
                    // this.user.forEach(e=>{
                    //   var id=e.id;
                    //   this.followornot(id)
                    // })
                    console.log("获取用户id")
                    console.log(response)
                    // this.id=response.data.data[0].id
                    // console.log("用户id"+this.id)

                    // console.log(this.user)
                }
                else if (response.data.code!=1){
                    this.open1()
                }
            })
        },

        // followornot(id){
        //
        //   axios.put("http://localhost:8088/userFollow/or/not/"+id).then(response=>{
        //   if (response.data.code==1){
        //     this.isfollow=true;
        //   }
        //   })
        //
        //
        // },

        followorclose(u){
            if(u.isfollow==1){
                u.isfollow=0;
                var isfollow=true
            }else {
                isfollow=false;
                u.isfollow=1;
            }


            axios.put("http://localhost:8088/userFollow/"+u.id+"/"+isfollow).then(response=>{

            })
        },


        queryByLike(){
            this.user="";
            this.blog="";
            this.type=1;
            console.log(this.blog)
            axios.get("http://localhost:8088/blog/queryByLike/"+this.key).then(response=>{
                localStorage.removeItem('k')

                if (response.data.code==1){
                    this.blog=response.data.data
                    localStorage.blog=response.data.data;
                    console.log(this.blog)
                }
                else if (response.data.code!=1){
                    this.open1()

                }

            })
        },
        reset(){
            this.blog=""


        },
        queryByLike2(){
            const k=window.localStorage.getItem('k')
            this.key=k;
            if (this.key==null){
                this.key=""
            }
            this.user="";
            this.blog="";
            this.type=1;
            console.log(this.blog)
            axios.get("http://localhost:8088/blog/queryByLike/"+this.key).then(response=>{
                localStorage.removeItem('k')

                if (response.data.code==1){
                    this.blog=response.data.data
                    localStorage.blog=response.data.data;
                    console.log(this.blog)
                }
                else if (response.data.code!=1){
                    this.open1()

                }
            })
        },
        queryByVisit(){
            this.showornot=true
            this.blog="";
            this.user="";
            this.type=2;
            console.log(this.blog)
            axios.get("http://localhost:8088/blog/queryByVisit/"+this.key).then(response=>{
                if (response.data.code==1){
                    this.blog=response.data.data
                    console.log(this.content)
                    localStorage.blog=response.data.data;
                    console.log(this.blog)
                }
                else if (response.data.code!=1){
                    this.open1()
                }
            })
        },
        queryByCollects(){
            this.user="";
            this.type=3;
            this.blog="";
            console.log(this.blog)
            axios.get("http://localhost:8088/blog/queryByCollects/"+this.key).then(response=>{
                if (response.data.code==1){
                    this.blog=response.data.data
                    console.log(this.content)
                    localStorage.blog=response.data.data;
                    console.log(this.blog)
                }
                else if (response.data.code!=1){
                    this.open1()
                }
            })
        },
        queryByTime(){
            this.user="";
            this.blog="";
            this.type=4;
            console.log(this.blog)
            axios.get("http://localhost:8088/blog/queryByTime/"+this.key).then(response=>{
                if (response.data.code==1){
                    this.blog=response.data.data
                    console.log(this.content)
                    localStorage.blog=response.data.data;
                    console.log(this.blog);
                }
                else if (response.data.code!=1){
                    this.open1()
                }
            })
        }
    },
    created(){
        this.queryByLike2()
    }
}
</script>
<style>
.el-message {
    top: 100px !important;
}

.box-card:hover{
    background-color: #CACACA;
    text-decoration: underline;
}
.el-card{
    margin: 0 auto
}
body {
    margin: 0;

}

.shadow {
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
}

::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: #1d2d44;
    background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
    );
}
::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
}


</style>
